<!--
 * @description: 字典数据
 * @Author: Islands
 * @Date: 2024-03-28 21:24:59
 * @LastEditTime: 2024-03-28 22:22:13
-->
<script lang="ts" setup>
import { ref, reactive } from "vue";
import {
    Plus,
    Minus,
} from '@element-plus/icons-vue'
const dialogVisible = ref<boolean>(false);
const title = ref<string>();
const handleClose = () => {
  dialogVisible.value = false;
};

/**
 * 打开弹窗触发事件
 */
function openDialog(_data: any) {
  title.value = _data.name;
  dialogVisible.value = true;
}

const tableData = ref([
  {
    id: 1,
    label: "男",
    value: 1,
    defaulted: true,
    enabled: 1,
    revision: 1,
    updatedTime: "2016-05-02",
  },
  {
    id: 2,
    label: "女",
    value: 0,
    defaulted: true,
    enabled: 1,
    revision: 1,
    updatedTime: "2016-05-02",
  },
]);
const editing = ref(null);

/**
 * 当table表格某一行被双击时触发方法
 * @param row
 * @param column
 * @param event
 */
const rowDblclick = (row: any, column: any, event: Event) => {
  editing.value = row.id;
};
const enterEvent = (data: any) => {
  editing.value = null;
};
defineExpose({
  openDialog,
});
</script>
<template>
  <el-dialog
    :modelValue="dialogVisible"
    :title="title"
    append-to-body
    draggable
    width="60%"
    :before-close="handleClose"
    class="dialog-xs"
  >
    <div class="content" style="widows: 100%; height: 200px">
      <el-button-group class="ml-4">
        <el-button type="primary" :icon="Plus" />
        <el-button type="primary" :icon="Minus" />
      </el-button-group>
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        @row-dblclick="rowDblclick"
      >
        <el-table-column align="center" type="index" width="50" label="#" />
        <el-table-column prop="label" label="键">
          <template #default="{ row }">
            <span v-if="editing !== row.id">{{ row.label }}</span>
            <!-- @blur="editing = null" -->
            <el-input
              v-else
              v-model="row.label"
              :placeholder="row.label"
              @keyup.enter="enterEvent(row)"
            ></el-input>
          </template>
        </el-table-column>

        <el-table-column prop="value" label="值">
          <template #default="{ row }">
            <span v-if="editing !== row.id">{{ row.value }}</span>
            <el-input
              v-else
              v-model="row.name"
              @keyup.enter="enterEvent(row)"
            ></el-input>
          </template>
        </el-table-column>

        <el-table-column prop="defaulted" label="是否默认值">
          <template #default="{ row }">
            <span v-if="editing !== row.id">{{ row.defaulted }}</span>
            <el-select-v2
              v-else
              v-model="row.defaulted"
              @keyup.enter="enterEvent(row)"
              :options="[
                { label: '是', value: 1 },
                { label: '否', value: 0 },
              ]"
              style="width: 100%"
            />
          </template>
        </el-table-column>

        <el-table-column prop="enabled" label="状态">
          <template #default="{ row }">
            <span v-if="editing !== row.id">
              <el-tag type="success">
                {{ row.enabled }}
              </el-tag>
            </span>
            <el-select-v2
              v-else
              v-model="row.enabled"
              :options="[
                { label: '启用', value: 1, type: 'success' },
                { label: '禁用', value: 0, type: 'info' },
              ]"
              style="width: 100%"
            />
          </template>
        </el-table-column>

        <el-table-column prop="revision" label="版本" />
        <el-table-column prop="updatedTime" label="修改日期" />

        <el-table-column label="#" align="center" v-if="editing !== null">
          <template #default="{ row }">
            <div class="flex-center">
              <el-button size="small" link @click="enterEvent(row)"
                >保存</el-button
              >
              <el-button size="small" link @click="editing = null"
                >取消</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>
<style lang="scss" scoped></style>
